<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import instance from "@/utils/http";

interface Question {
  questionId: number;
  surveyId: number;
  content: string;
  type: string;
  selectContent: string
}

const isEdit = ref(false)
const props = defineProps(["surveyId"])


const questionForm = reactive({
  content: '',
  type: 'text',
  surveyId: props.surveyId,
  questionId:null,
  selectContent:""
});

const dialogVisible = ref(false);
const questions = ref<Question[]>([]);

// 获取当前调查的所有问题
const fetchQuestions = async (surveyId: number) => {
  try {
    const response = await instance.get(`/questions/survey/${surveyId}`);
    questions.value = response.data.data;
  } catch (error) {
    ElMessage.error('无法加载问题数据');
  }
};

// 创建问题
const createQuestion = async () => {
  try {
    const response = await instance.post(`/questions`, questionForm);
    ElMessage.success('问题创建成功');
    fetchQuestions(props.surveyId); // 刷新问题列表
    questionForm.content = '';
    questionForm.type = 'single-choice';
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('创建问题失败');
  }
};

const editQuestion = async () => {
  try {
    const response = await instance.put(`/questions/${questionForm.questionId}`, questionForm);
    ElMessage.success('修改成功');
    fetchQuestions(props.surveyId); // 刷新问题列表
    questionForm.content = '';
    questionForm.type = 'single-choice';
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('修改问题失败');
  }
}

// 提交问题表单
const submitQuestionForm = () => {
  if(isEdit.value){
    editQuestion();
  }else{
    createQuestion();
  }
};

// 编辑问题
const handleEditQuestion = (row: Question) => {
  questionForm.content = row.content;
  questionForm.type = row.type;
  questionForm.selectContent = row.selectContent
  questionForm.surveyId = row.surveyId
  questionForm.questionId = row.questionId
  dialogVisible.value = true;
  isEdit.value = true

};

// 删除问题
const handleDeleteQuestion = async (row: Question) => {
  try {
    const response = await instance.delete(`/questions/${row.questionId}`);
    ElMessage.success('问题删除成功');
    fetchQuestions(props.surveyId); // 刷新问题列表
  } catch (error) {
    ElMessage.error('删除问题失败');
  }
};

// 创建调查
const handleCreate = () => {
  dialogVisible.value = true;
  isEdit.value = false
};

onMounted(() => {
  fetchQuestions(props.surveyId);
});

const map = {
  "text":"文本",
  "seleced":"单选题",
  "multiple-choice":"多选题"
}

</script>

<template>
  <!-- 编辑调查对话框 -->
  <el-dialog v-model="dialogVisible" title="编辑调查" width="50%">
    <el-form :model="questionForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="问题内容" prop="content">
        <el-input v-model="questionForm.content" placeholder="请输入问题内容"/>
      </el-form-item>
      <el-form-item label="问题类型" prop="type">
        <el-select v-model="questionForm.type" placeholder="请选择问题类型">
          <el-option label="单选题" value="seleced"></el-option>
          <el-option label="多选题" value="multiple-choice"></el-option>
          <el-option label="文本" value="text"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择内容" prop="select_content">
        <el-input v-model="questionForm.selectContent" placeholder="请输入选项内容，逗号分隔"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitQuestionForm">提交问题</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 问题表格 -->
  <el-table :data="questions" style="width: 100%">
    <el-table-column prop="questionId" label="问题ID" width="120"></el-table-column>
    <el-table-column prop="content" label="问题内容"></el-table-column>
    <el-table-column prop="type" label="问题类型" width="150">
      <template #default="scope">
        {{map[scope.row.type]}}
      </template>
    </el-table-column>
    <el-table-column prop="selectContent" label="问题选项" width="150">

    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEditQuestion(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDeleteQuestion(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 创建调查按钮 -->
  <el-button type="success" @click="handleCreate">创建问题</el-button>
</template>


<style scoped>

</style>
